<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>数据统计</el-breadcrumb-item>
            <el-breadcrumb-item>图书统计</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card style="width: 700px;height:700px;">
            <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
            <div id="main" style="width: 600px;height:600px;"></div>
            <div align="center" style="font-size: 20px;">
              全站收纳书籍数量为:
                <!-- <input type="text" :data="total" style="width: 60px; height: 30px; font-size: 20px;" disabled></input> -->
                <input type="text" v-model="total" style="width: 80px; height: 30px; font-size: 20px; text-align: center;" disabled></input>
              本
            </div>
        </el-card>
    </div>
</template>

<script>
    //导入
    import echarts from 'echarts'
    export default {
        data() {
            return {
              loading: false,
              bookCount: [],
              total: 0,
            }
        },
        methods: {},
        created() {

        },
        async mounted() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '书籍上传数量统计表'
                },
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'cross'
                  }
                },
                legend: {
                    data: ['书籍上传数量']
                },
                xAxis: {
                    data: [
                      '1月',
                      '2月',
                      '3月',
                      '4月',
                      '5月',
                      '6月',
                      '7月',
                      '8月',
                      '9月',
                      '10月',
                      '11月',
                      '12月'
                    ],
                    axisPointer: {
                      type: 'shadow'
                    }
                },
                yAxis: [
                  {
                    type: 'value',
                    name: '书籍上传数量',
                    interval: 10,
                    axisLabel: {
                      formatter: '{value}'
                    }
                  },
                ],
                series: [
                    {
                        name: '书籍上传数量',
                        type: 'bar',
                        data: []
                    },
                ]
            };
           const {data: result} = await this.$http.get('/book/bookCount');
            if (result.status !== 200) {
              return this.$message.error("数据统计失败")
            }
            this.bookCount = result.data
            for (let j = 0; j < this.bookCount.length; j++) {
              let mon = this.bookCount[j].MONTH
              for (let i = 1; i <= 12; i++) {
                if(i == mon){
                  option.series[0].data[i-1] = this.bookCount[j].num
                }
              }
              this.total = this.total + this.bookCount[j].num
            }
            myChart.setOption(option);

        }
    }
</script>

<style lang="less" scoped>

</style>
